import React from 'react';

import PropTypes from 'prop-types';
import Config from "../Config";

class ProgressView extends React.Component {

    render() {

        let mode = this.props.mode,
            scale = 0.4;
        if (mode === ProgressView.MODE_BIG) {
            scale = 0.6;
        } else if (mode === ProgressView.MODE_SMALL) {
            scale = 0.2;
        } else {
            scale = 0.4;
        }

        let color = this.props.color ? this.props.color : Config.BaseColor;

        let visibility = this.props.visibility ? 'block' : 'none';
        let wrapperStyle = {
            display:this.props.visibility ? "flex" : 'none',
            justifyContent:"center",
            paddingTop:this.props.top?this.props.top:'200px',
            position:'fixed',
            top:0,
            left:0,
            width:'100%',
        }
        let svg = {
            width: '120px',
            height: '120px',
            overflow: 'visible',
            transform: 'scale(' + scale + ')',
            display: visibility,
        }

        let circle = {
            fill: color,
            fillOpacity: 0,
            animation: 'opacity 1.2s linear infinite',
        };

        return (
            <div style={{...wrapperStyle, ...this.props.style}}>
            <svg style={{...svg}}>
                <g>
                    <circle style={{...circle, ...Style.circle_1}}
                            transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35"
                            cy="16.6987298" r="10">
                    </circle>
                    <circle style={{...circle, ...Style.circle_2}}
                            transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) "
                            cx="16.6987298"
                            cy="35" r="10">
                    </circle>
                    <circle style={{...circle, ...Style.circle_3}}
                            transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60"
                            r="10">
                    </circle>
                    <circle style={{...circle, ...Style.circle_4}}
                            transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) "
                            cx="16.6987298"
                            cy="85" r="10">
                    </circle>
                    <circle style={{...circle, ...Style.circle_5}}
                            transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) "
                            cx="35"
                            cy="103.30127" r="10">
                    </circle>
                    <circle style={{...circle, ...Style.circle_6}} cx="60" cy="110" r="10">
                    </circle>
                    <circle style={{...circle, ...Style.circle_7}}
                            transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) "
                            cx="85"
                            cy="103.30127" r="10">
                    </circle>
                    <circle style={{...circle, ...Style.circle_8}}
                            transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) "
                            cx="103.30127"
                            cy="85" r="10">
                    </circle>
                    <circle style={{...circle, ...Style.circle_9}}
                            transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60"
                            r="10">
                    </circle>
                    <circle style={{...circle, ...Style.circle_10}}
                            transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) "
                            cx="103.30127" cy="35" r="10">
                    </circle>
                    <circle style={{...circle, ...Style.circle_11}}
                            transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85"
                            cy="16.6987298" r="10">
                    </circle>
                    <circle style={{...circle, ...Style.circle_12}} cx="60" cy="10" r="10">
                    </circle>
                </g>
            </svg>
            </div>
        );
    }

}

const Style = {
    circle_1: {
        animationDelay: '-0.1s',
    },
    circle_2: {
        animationDelay: '-0.2s',
    },
    circle_3: {
        animationDelay: '-0.3s',
    },
    circle_4: {
        animationDelay: '-0.4s',
    },
    circle_5: {
        animationDelay: '-0.5s',
    },
    circle_6: {
        animationDelay: '-0.6s',
    },
    circle_7: {
        animationDelay: '-0.7s',
    },
    circle_8: {
        animationDelay: '-0.8s',
    },
    circle_9: {
        animationDelay: '-0.9s',
    },
    circle_10: {
        animationDelay: '-1.0s',
    },
    circle_11: {
        animationDelay: '-1.1s',
    },
    circle_12: {
        animationDelay: '-1.2s',
    }
};

ProgressView.MODE_BIG = 'big';
ProgressView.MODE_MEDIUM = 'medium';
ProgressView.MODE_SMALL = 'small';

ProgressView.propTypes = {
    color: PropTypes.string,
    mode: PropTypes.string,
    visibility: PropTypes.bool.isRequired,
};

export default ProgressView;
